<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>layui</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="__STATIC__/lay/lib/layui-v2.5.5/css/layui.css" media="all">
    <link rel="stylesheet" href="__STATIC__/lay/lib/font-awesome-4.7.0/css/font-awesome.min.css" media="all">
    <link rel="stylesheet" href="__STATIC__/lay/css/public.css" media="all">
    <style>
        body {
            background-color: #ffffff;
        }
    </style>
</head>

<body>
    <div class="layui-form layuimini-form" lay-filter="formTest1">
        <div class="layui-form-item">
            <label class="layui-form-label required">权限名称</label>
            <div class="layui-input-block">
                <input type="text" name="title" lay-verify="required" lay-reqtext="权限名称不能为空" placeholder="请输入权限名称"
                    value="" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label required">权限节点</label>
            <div class="layui-input-block">
                <input type="radio" name="is_menu" value="1" title="目录节点" checked="">
                <input type="radio" name="is_menu" value="0" title="权限节点">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label ">图标</label>
            <div class="layui-input-block">
                <input type="text" id="iconPicker" lay-filter="iconPicker" style="display:none;" name="icon">
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label">跳转</label>
            <div class="layui-input-block">
                <select name="target">
                    <option value="_self" selected="">当前页</option>
                    <option value="_blank">单独页</option>
                </select>
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label">父级菜单</label>
            <div class="layui-input-block">
                <select name="pid" id="pidselect">
                    <option value="-1" selected="">顶级菜单</option>

                </select>
            </div>
        </div>




        <div class="layui-form-item">
            <label class="layui-form-label">URL</label>
            <div class="layui-input-block">
                <input type="text" name="href" placeholder="请输入路由地址" value="" class="layui-input">
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label">排序</label>
            <div class="layui-input-block">
                <input type="text" name="sort" placeholder="数值大的靠前" value="" class="layui-input">
            </div>
        </div>

        <div class="layui-form-item">
            <div class="layui-input-block">
                <button class="layui-btn layui-btn-normal" lay-submit lay-filter="saveBtn">确认保存</button>
            </div>
        </div>
    </div>
    <script src="__STATIC__/lay/lib/layui-v2.5.5/layui.js" charset="utf-8"></script>
    <script src="__STATIC__/lay/lib/jquery-3.4.1/jquery-3.4.1.min.js" charset="utf-8"></script>
    <script src="__STATIC__/lay/js/lay-config.js?v=1.0.4" charset="utf-8"></script>
    <script>
        layui.use(['form', 'iconPickerFa'], function () {
            var form = layui.form,
                layer = layui.layer,
                iconPicker = layui.iconPickerFa,
                $ = layui.$;
            var menuid = parent.layer.methodConfig.data.id
            //请求列表
            $.ajax({
                type: "post",
                url: "/admin/power/init2",
                data: {
                    id: menuid
                },
                dataType: "json",
                success: function (res) {
                    // var str = ""
                    $.each(res.data, function (key, value) {
                        $('#pidselect').append(new Option(value.title, value.id))
                        if (value.child) {
                            $.each(value.child, function (key2, value2) {
                                $('#pidselect').append(new Option('─ ┴─' + value2
                                    .title, value2.id))
                                if (value2.child) {
                                    $.each(value2.child, function (key3, val3) {
                                        $('#pidselect').append(new Option(
                                            '─ ─ ─ ┴─' + val3.title,
                                            val3.id))
                                    });
                                }
                            });
                        }

                    });

                    if (menuid != 0) {
                        $.ajax({
                            type: "post",
                            url: "/admin/power/find",
                            data: {
                                id: menuid
                            },
                            dataType: "json",
                            success: function (res) {
                                form.val('formTest1', {
                                    "title": res.data.title,
                                    "is_menu": res.data.is_menu,
                                    "icon": res.data.icon,
                                    "target": res.data.target,
                                    "pid": res.data.pid,
                                    "href": res.data.href,
                                    "sort": res.data.sort

                                })
                                //icon写入
                                iconPicker.checkIcon('iconPicker', res.data.icon);
                            }
                        });
                    }
                    form.render();
                }
            });
            //判断是否是修改

            console.log(menuid)


            iconPicker.render({
                // 选择器，推荐使用input
                elem: '#iconPicker',
                // 数据类型：fontClass/unicode，推荐使用fontClass
                url: '__STATIC__/lay/lib/font-awesome-4.7.0/less/variables.less',
                // 是否开启搜索：true/false，默认true
                search: true,
                // 是否开启分页：true/false，默认true
                page: true,
                // 每页显示数量，默认12
                limit: 12,
                // 每个图标格子的宽度：'43px'或'20%'
                cellWidth: '43px',
                // 点击回调
                click: function (data) {
                    console.log(data);
                }
                // 渲染成功后的回调
                // success: function (d) {
                //     console.log(d);
                // }
            });


            //监听提交
            form.on('submit(saveBtn)', function (data) {
                if (menuid != 0) {
                    data.field.id = menuid
                    $.ajax({
                        type: "post",
                        url: "/admin/power/edit",
                        data: data.field,
                        dataType: "json",
                        success: function (response) {
                            if (response.code == 1) {
                                // layer.close(index);
                                parent.window.location.reload()
                                var iframeIndex = parent.layer.getFrameIndex(window.name);
                                parent.layer.close(iframeIndex);

                            }
                        }
                    });
                } else {
                    $.ajax({
                        type: "post",
                        url: "/admin/power/addvalue",
                        data: data.field,
                        dataType: "json",
                        success: function (response) {
                            if (response.code == 1) {
                                // layer.close(index);
                                parent.window.location.reload()
                                var iframeIndex = parent.layer.getFrameIndex(window.name);
                                parent.layer.close(iframeIndex);

                            }
                        }
                    });
                }

                return false;
            });

        });
    </script>
</body>

</html>